<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>EASY后台</title>
    <link rel="icon" th:href="@{/static/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 顶部区域 -->
    <div class="layui-header">
        <div class="layui-logo">
            <img class="easy-logo-img" th:src="@{/static/images/logo.png}">
            <span class="easy-logo-title">OZO-EASY</span>
        </div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="spreadMenu">
                <i class="layui-icon layui-icon-shrink-right" id="spreadMenu"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-show-xs-inline-block" lay-header-event="fullScreen">
                <i class="layui-icon layui-icon-screen-full" id="fullScreen"></i>
            </li>
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img th:src="${'/sysFile/download/' + userInfo.avatar}" class="layui-nav-img">[[${userInfo.nickname}]]
                </a>
                <dl class="layui-nav-child easy-header-child">
                    <dd><a href="javascript:;" lay-header-event="updateInfo">个人资料</a></dd>
                    <dd><a href="javascript:;" lay-header-event="updatePwd">修改密码</a></dd>
                    <dd><a href="javascript:;" lay-header-event="logout">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="rightMore" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <!-- 左侧导航区域 -->
    <div class="layui-side layui-tab">
        <ul class="layui-nav layui-nav-tree layui-side layui-nav-side" lay-filter="easy-menu">
            <li class="layui-nav-item easy-menu-item">
                <a href="javascript:;" data-url="/welcome" data-title="首页" id="easy-welcome">
                    <i class="layui-icon layui-icon-home"></i>
                    <span class="easy-menu-title">首页</span>
                </a>
            </li>
            <li class="layui-nav-item easy-menu-item" th:each="menu : ${menuList}" th:switch="${menu.children != null && menu.children.size > 0}">
                <th:block th:case="true">
                    <a href="javascript:;">
                        <i th:class="${'layui-icon ' + menu.icon}"></i>
                        <span class="easy-menu-title">[[${menu.title}]]</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd th:each="subMenu : ${menu.children}">
                            <a href="javascript:;" th:data-url="${subMenu.route}" th:data-title="${subMenu.title}">
                                [[${subMenu.title}]]
                            </a>
                        </dd>
                    </dl>
                </th:block>
                <th:block th:case="false">
                    <a href="javascript:;" th:data-url="${menu.route}" th:data-title="${menu.title}">
                        <i th:class="${'layui-icon ' + menu.icon}"></i>
                        <span class="easy-menu-title">[[${menu.title}]]</span>
                    </a>
                </th:block>
            </li>
        </ul>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div class="layui-tab" lay-filter="easy-body" lay-allowClose="true">
            <ul class="layui-tab-title easy-tab-title"></ul>

            <div class="easy-tab-option">
                <ul class="layui-nav">
                    <li class="layui-nav-item">
                        <a href="javascript:;">关闭</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" lay-header-event="closeAll">关闭全部</a></dd>
                            <dd><a href="javascript:;" lay-header-event="closeOther">关闭其他</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>

            <div class="layui-tab-content"></div>
        </div>
    </div>

    <!-- 底部区域 -->
    <div class="layui-footer">
        <span class="layui-footer-body">
            © 2025 OZO-EASY 版权所有
        </span>
    </div>
</div>

<script th:src="@{/static/js/index.js}"></script>
<script th:src="@{/static/js/jquery.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    layui.use(['element', 'layer', 'util'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var util = layui.util;

        // tab事件
        var tabEvent = {
            // 新打开Tab
            add: function (url, name, allowClose) {
                element.tabAdd('easy-body', {
                    title: name,
                    content: '<iframe src="' + url + '" scrolling="auto" frameborder="0"  style="width:100%;height:100%;"></iframe>',
                    id: url,
                    allowClose: allowClose
                })
                changeFrameWH();
            },
            // 切换Tab页
            change: function (url) {
                element.tabChange('easy-body', url);
            },
            // 删除指定Tab
            delete: function (url) {
                element.tabDelete("easy-body", url);
            }
        };

        // 监听菜单点击
        element.on('nav(easy-menu)', function (elem) {
            // 1.菜单样式展开逻辑
            spreadMenu();

            // 2.页面打开逻辑
            var url = elem.attr('data-url');
            var title = elem.attr('data-title');
            if (!url) {
                return;
            }

            // 判断Tab是否已添加
            if ($(".easy-tab-title li[lay-id='" + url + "']").length <= 0) {
                var allowClose = true;
                if (url === '/welcome') {
                    allowClose = false;
                }
                tabEvent.add(url, title, allowClose);
            }

            tabEvent.change(url);
        });

        // 打开首页
        layer.ready(function () {
            document.getElementById('easy-welcome').click();
        });

        // 头部事件
        util.event('lay-header-event', {
            // 菜单展开收起
            spreadMenu: function () {
                spreadOrShrinkMenu();
            },
            // 全屏
            fullScreen: function () {
                fullScreen();
            },
            // 右侧菜单事件
            rightMore: function () {
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            },
            // 修改个人信息
            updateInfo: function () {
                layer.open({
                    type: 2,
                    area: ['700px', '500px'],
                    title: '修改个人信息',
                    shadeClose: true,
                    scrollbar: false,
                    content: '/auth/updateInfoForm'
                });
            },
            // 修改密码
            updatePwd: function () {
                layer.open({
                    type: 2,
                    area: ['500px', '400px'],
                    title: '修改密码',
                    shadeClose: true,
                    scrollbar: false,
                    content: '/auth/updatePwdForm'
                });
            },
            // 退出登录
            logout: function () {
                $.ajax({
                    url: '/auth/logout',
                    type: 'POST',
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (response) {
                        if (response.code === 200) {
                            layer.msg('退出成功', {icon: 1});

                            window.location.href = "/login";

                        } else {
                            layer.msg(response.msg, {icon: 0});
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.msg('请求失败', {icon: 0});
                    }
                });
            },
            closeAll: function () {
                var elements = document.querySelectorAll('.easy-tab-title li');
                elements.forEach(e => {
                    var url = e.getAttribute('lay-id');
                    if (url !== '/welcome') {
                        tabEvent.delete(url);
                    }
                })
            },
            closeOther: function () {
                var elements = document.querySelectorAll('.easy-tab-title li');
                elements.forEach(e => {
                    var url = e.getAttribute('lay-id');
                    if (!e.classList.contains('layui-this') && url !== '/welcome') {
                        tabEvent.delete(url);
                    }
                })
            }
        });

        // 重置iframe窗口大小
        $(window).resize(function () {
            changeFrameWH();
        })

        // 计算frame高度
        function changeFrameWH() {
            var h = $(window).height() - 60 - 40 - 44;
            $("iframe").css("height", h + "px");
        }
    });
</script>
</body>
</html>